<template>
  <div class="app-container">
    <h3>审核</h3>
    <div class="content-container">
      <div>
        搜索内容：
        <el-input
          v-model="keyword"
          style="width: 260px ;margin-right: 50px;"
          size="small"
          placeholder="输入关键字搜索"/>
        状态：
        <el-select v-model="status" style=" width: 260px; margin-right: 50px;" placeholder="请选择" size="small">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <el-button style="margin-right: 20px;" type="primary" size="small" @click="SearchServiceDynamic">查询</el-button>
        <el-button size="small" @click="ResetSearch">重置</el-button>
      </div>
      <div class="table-wrap">
        <el-table
          ref="table"
          :data="ServiceList"
          style="width: 100%">
          <el-table-column
            label="提交时间"
            width="160px"
            prop="create_time"/>
          <el-table-column
            label="提交内容"
          >
            <template slot-scope="scope">
              <div class="content">
                <div class="picture">
                  <img :src="scope.row.show_image" alt="封面" style="width: 103px; height: 58px; vertical-align: middle;">
                </div>
                <span class="title">{{ scope.row.title }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            width="160"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.show_status }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="200">
            <template slot-scope="scope">
              <div style="display: flex">
                <div style="min-width: 45px;">
                  <el-button v-show="scope.row.status==='4'" type="text" size="small">
                    <router-link :to="{path:'/draft/index', query:{id:scope.row.dynamic_id,status:scope.row.status}}">编辑
                    </router-link>
                  </el-button>
                </div>
                <div style="min-width: 70px;">
                  <el-button v-show="scope.row.status==='4'" type="text" size="small" @click="show(scope.row)">失败原因
                  </el-button>
                </div>
                <div style="min-width: 45px;">
                  <el-button
                    v-show="scope.row.status==='2' || scope.row.status==='4'"
                    type="text"
                    size="small"
                    @click="handleDelete(scope.$index, scope.row)">删除
                  </el-button>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-collapse-transition>
                <div class="fail-box">
                  <div class="close-icon pointer"><i class="el-icon-close" @click="close(scope.row)"/></div>
                  <div>
                    <svg-icon icon-class="check-refuse" />
                    &nbsp&nbsp审核不通过!
                    <ul>
                      <li v-for="(item, index) in scope.row.error_list" class="question">
                        <div class="question-label">问题{{ index + 1 }}：</div>
                        <div class="question-content">{{ item.message }}</div>
                      </li>
                    </ul>
                    <div style="text-align: right">
                      客服电话：400-826-6205
                    </div>
                  </div>
                </div>
              </el-collapse-transition>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { delServiceDynamic, SearchServiceDynamic } from '@/api/serviceinfo'

export default {
  data() {
    return {
      ServiceList: [],
      status: '',
      keyword: '',
      options: [{
        value: '0',
        label: '待审核'
      }, {
        value: '2',
        label: '审核通过'
      }, {
        value: '4',
        label: '审核拒绝'
      }]
    }
  },
  created() {
    this.SearchServiceDynamic()
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row)
    },
    // 处理数据
    HandleData(data) {
      for (let i = 0; i < data.length; i++) {
        data[i].create_time = this.formatDateTime(data[i].create_time)
        data[i].show_status = (data[i].status === '2') ? '审核通过' : ((data[i].status === '4') ? '审核拒绝' : '待审核')
      }
      return data
    },
    // 删除动态
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delServiceDynamic(row.dynamic_id).then(response => {
          if (response.status === 200) {
            this.SearchServiceDynamic()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$message({
              type: 'danger',
              message: '删除失败!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 搜索数据
    SearchServiceDynamic() {
      SearchServiceDynamic(this.keyword, this.status).then(response => {
        if (response.status === 200) {
          // this.ServiceList = response.data.data
          this.ServiceList = this.HandleData(response.data.data)
        } else {
          console.log('数据获取失败')
        }
      })
    },
    // 搜索重置
    ResetSearch() {
      this.status = ''
      this.keyword = ''
      this.SearchServiceDynamic()
    },
    // 处理时间戳函数
    formatDateTime(timeStamp) {
      var date = new Date()
      date.setTime(timeStamp * 1000)
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? ('0' + m) : m
      var d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      return y + '.' + m + '.' + d
    },
    show(row) {
      this.$refs.table.toggleRowExpansion(row, true)
    },
    close(row) {
      this.$refs.table.toggleRowExpansion(row, false)
    }
  }
}
</script>
<style rel="stylesheet" lang="scss">
  .app-container {
    .el-table__expanded-cell[class*=cell] {
      padding: 20px 0;
    }
  }
  .el-table__header {
    background: rgba(242, 242, 242, 1);
    border: 1px solid rgba(228, 228, 228, 1);
    border-bottom: none;
  }

  .table-wrap {
    .el-table__expand-icon {
      display: none;
    }
    .el-button {
      margin-left: 0 !important;
    }
    .el-button + .el-button {
      margin-left: 0;
    }
    .cell {
      text-align: right;
    }
    .cell:first-child {
      text-align: left;
    }
  }
</style>
<style rel="stylesheet" lang="scss" scoped>
  .fail-box:before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border: 1px solid rgba(250, 163, 158, 1);
    background: rgba(254, 241, 240, 1);
    border-left: none;
    border-bottom: none;
    transform: rotate(-45deg);
    position: absolute;
    top: -6px;
    right: 120px;
  }

  .fail-box {
    margin-top: -21px;
    text-align: left;
    position: relative;
    background: rgba(254, 241, 240, 1);
    border-radius: 2px;
    border: 1px solid rgba(250, 163, 158, 1);
    padding: 17px 24px;
    .close-icon {
      position: absolute;
      right: 20px;
      top: 10px;
    }
    .question {
      display: flex;
      padding: 12px 26px;
      .question-label {
        margin-right: 10px;
      }
    }
  }

  .app-container {
    padding: 30px;
  }

  .content-container {
    background-color: #fff;
    min-height: 600px;
    padding: 40px 30px;
  }

  .table-wrap {
    padding-top: 40px;
    .content {
      display: flex;
      .picture {
        width: 103px;
        height: 58px;
        border: 1px solid #e9e9e9;
      }
    }
    .title {
      display: -webkit-box;
      height: 44px;
      text-align: justify;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      vertical-align: top;
      margin-left: 20px;
      margin-right: 60px;
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: rgba(102, 102, 102, 1);
      line-height: 22px;
    }
  }

</style>
